import { ref, computed } from 'vue'
import type { Message, Conversation, ProcessingTask, ResultPanel } from '../../types/home'

export function useHomeState() {
  // 基础状态
  const sidebarOpen = ref(true)
  const selectedRobot = ref('robot1')
  const searchQuery = ref('')
  const selectedConversation = ref<Conversation | null>(null)
  const newMessage = ref('')
  const isLoading = ref(false)
  
  // 数据状态
  const messages = ref<Message[]>([])
  const conversations = ref<Conversation[]>([])
  const progress = ref(0)
  const processingTasks = ref<ProcessingTask[]>([])
  const resultPanels = ref<ResultPanel[]>([])

  // 计算属性
  const filteredConversations = computed(() => {
    if (!searchQuery.value) return conversations.value
    return conversations.value.filter(conv => 
      conv.title.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  })

  // 重置状态
  const resetState = () => {
    messages.value = []
    processingTasks.value = []
    resultPanels.value = []
    progress.value = 0
    selectedConversation.value = null
  }

  // 创建新对话
  const createNewConversation = () => {
    selectedConversation.value = null
    resetState()
  }

  // 加载对话数据
  const loadConversation = (conversation: Conversation) => {
    selectedConversation.value = conversation
    // 清空当前消息
    messages.value = []
    processingTasks.value = []
    resultPanels.value = []
    progress.value = 0
    
    // 根据对话类型加载不同的示例消息
    if (conversation.id === 1) {
      // Vue3对话
      messages.value = [
        {
          id: 1,
          role: 'user',
          content: '你好，请介绍一下Vue3的主要特性',
          created_at: new Date('2024-01-15T10:30:00')
        },
        {
          id: 2,
          role: 'assistant',
          content: 'Vue3是一个现代化的前端框架，主要特性包括：\n\n1. **Composition API** - 提供更灵活的组件逻辑组织方式\n2. **更好的TypeScript支持** - 内置TS支持，提供更好的类型安全\n3. **性能优化** - 重构虚拟DOM，提升渲染性能\n4. **更小的包体积** - 通过Tree-shaking减少最终包大小\n5. **新的组件生命周期** - 更清晰的组件生命周期钩子\n\n您想了解哪个特性的更多细节吗？',
          created_at: new Date('2024-01-15T10:30:15')
        }
      ]
      
      // 加载处理任务
      processingTasks.value = [
        {
          id: 1,
          title: '1. 问题解析',
          description: '分析用户问题意图',
          icon: 'fas fa-search',
          details: {
            title: '问题解析流程',
            items: [
              '✓ 意图识别：确定用户询问的具体内容',
              '✓ 关键词提取：识别问题中的核心概念',
              '✓ 领域分类：判断问题所属的知识领域',
              '✓ 复杂度评估：分析问题的技术深度'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 2,
          title: '2. 知识检索',
          description: '搜索相关知识库',
          icon: 'fas fa-book',
          details: {
            title: '知识检索过程',
            items: [
              '✓ 文档匹配：查找相关技术文档',
              '✓ 内容筛选：过滤最相关的信息',
              '✓ 相关度排序：按匹配程度排序结果',
              '✓ 质量评估：验证信息的准确性'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 3,
          title: '3. 内容生成',
          description: '生成回答内容',
          icon: 'fas fa-magic',
          details: {
            title: '内容生成步骤',
            items: [
              '✓ 信息整合：综合多源信息',
              '✓ 逻辑组织：构建清晰的回答结构',
              '✓ 语言优化：确保表达流畅自然',
              '✓ 准确性检查：验证技术细节的正确性'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 4,
          title: '4. 结果优化',
          description: '优化最终回答',
          icon: 'fas fa-check-circle',
          details: {
            title: '结果优化流程',
            items: [
              '✓ 格式优化：调整段落结构和排版',
              '✓ 补充说明：添加必要的背景信息',
              '✓ 示例提供：增加具体的应用案例',
              '✓ 质量保证：确保回答的完整性和实用性'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        }
      ]
      
      // 加载结果面板
      resultPanels.value = [
        {
          id: 1,
          title: '问题解析完成',
          content: `
            <div class="bg-green-50 p-3 rounded-lg">
              <h4 class="font-medium text-green-800 mb-2">解析结果</h4>
              <div class="text-sm text-green-700 space-y-1">
                <div>✓ 问题类型：环境监测专业知识查询</div>
                <div>✓ 查询对象：深圳监测站铜分析方法</div>
                <div>✓ 信息深度：需要详细技术参数和标准依据</div>
                <div>✓ 输出格式：结构化方法列表</div>
              </div>
            </div>
            <div class="bg-blue-50 p-3 rounded-lg">
              <h4 class="font-medium text-blue-800 mb-2">关键实体识别</h4>
              <div class="text-sm text-blue-700">
                <div class="flex flex-wrap gap-2">
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">深圳监测站</span>
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">地表水</span>
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">铜</span>
                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">分析方法</span>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-search',
          iconBg: 'bg-blue-500',
          step: '步骤 1',
          stepBadge: 'bg-blue-100 text-blue-600',
          timestamp: new Date('2024-01-15T10:30:05'),
          active: false,
          visible: true
        },
        {
          id: 2,
          title: '知识检索完成',
          content: `
            <div class="space-y-3">
              <div class="border-l-4 border-blue-400 pl-4 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors">
                <h4 class="font-medium text-slate-800">《地表水环境质量标准》(GB 3838-2002)</h4>
                <p class="text-sm text-slate-600 mt-1">规定了地表水中铜的监测方法和标准限值，检测限为0.005mg/L</p>
                <div class="flex items-center space-x-2 mt-2">
                  <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded">国家标准</span>
                  <span class="text-xs text-slate-500">相关度: 95%</span>
                  <i class="fas fa-external-link-alt text-blue-500 text-xs"></i>
                </div>
              </div>
              <div class="border-l-4 border-blue-400 pl-4 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors">
                <h4 class="font-medium text-slate-800">《水质 65种元素的测定 电感耦合等离子体质谱法》(HJ 700-2014)</h4>
                <p class="text-sm text-slate-600 mt-1">采用ICP-MS同时测定多种金属元素，铜的检测限为0.0001mg/L</p>
                <div class="flex items-center space-x-2 mt-2">
                  <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded">行业标准</span>
                  <span class="text-xs text-slate-500">相关度: 92%</span>
                  <i class="fas fa-external-link-alt text-blue-500 text-xs"></i>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-book',
          iconBg: 'bg-indigo-500',
          step: '步骤 2',
          stepBadge: 'bg-indigo-100 text-indigo-600',
          timestamp: new Date('2024-01-15T10:30:08'),
          active: false,
          visible: true
        },
        {
          id: 3,
          title: '互联网搜索完成',
          content: `
            <div class="space-y-3">
              <div class="border-l-4 border-yellow-400 pl-4 cursor-pointer hover:bg-yellow-50 p-2 rounded transition-colors">
                <h4 class="font-medium text-slate-800">深圳环境监测站最新技术进展</h4>
                <p class="text-sm text-slate-600 mt-1">介绍深圳监测站引进的ICP-MS设备及其在重金属检测中的应用...</p>
                <div class="flex items-center space-x-2 mt-2">
                  <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">技术文章</span>
                  <span class="text-xs text-slate-500">深圳环保网</span>
                  <span class="text-xs text-slate-500">2024-01-15</span>
                  <i class="fas fa-external-link-alt text-yellow-500 text-xs"></i>
                </div>
              </div>
              <div class="border-l-4 border-yellow-400 pl-4 cursor-pointer hover:bg-yellow-50 p-2 rounded transition-colors">
                <h4 class="font-medium text-slate-800">水中重金属检测技术最新研究进展</h4>
                <p class="text-sm text-slate-600 mt-1">综述了包括原子吸收、ICP-MS、电化学法等铜检测技术的最新发展...</p>
                <div class="flex items-center space-x-2 mt-2">
                  <span class="text-xs text-yellow-600 bg-yellow-50 px-2 py-1 rounded">学术论文</span>
                  <span class="text-xs text-slate-500">中国环境科学</span>
                  <span class="text-xs text-slate-500">2024-01-10</span>
                  <i class="fas fa-external-link-alt text-yellow-500 text-xs"></i>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-magic',
          iconBg: 'bg-purple-500',
          step: '步骤 3',
          stepBadge: 'bg-purple-100 text-purple-600',
          timestamp: new Date('2024-01-15T10:30:12'),
          active: false,
          visible: true
        },
        {
          id: 4,
          title: '生成回复完成',
          content: `
            <div class="space-y-6">
              <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-5 rounded-lg">
                <h4 class="font-semibold text-blue-800 mb-3 flex items-center">
                  <i class="fas fa-info-circle mr-2"></i>
                  分析方法概述
                </h4>
                <p class="text-sm text-blue-700 leading-relaxed">
                  深圳监测站分析地表水中铜主要采用国家标准方法，包括原子吸收分光光度法、电感耦合等离子体质谱法等。这些方法具有高灵敏度、高准确度的特点，能够满足《地表水环境质量标准》(GB 3838-2002)中对铜的检测要求。
                </p>
              </div>
              
              <div>
                <h4 class="font-semibold text-slate-800 mb-4">主要分析方法</h4>
                <div class="space-y-4">
                  <div class="border-l-4 border-green-400 pl-4">
                    <h5 class="font-medium text-slate-800">1. 原子吸收分光光度法 (AAS)</h5>
                    <div class="mt-2 text-sm text-slate-600 space-y-1">
                      <p><strong>检测原理：</strong>利用铜原子在特定波长下的吸收特性进行定量分析</p>
                      <p><strong>检测限：</strong>0.001 mg/L</p>
                      <p><strong>适用范围：</strong>地表水、地下水、饮用水</p>
                      <p><strong>标准依据：</strong>GB/T 7475-1987</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-check-circle',
          iconBg: 'bg-green-500',
          step: '步骤 4',
          stepBadge: 'bg-green-100 text-green-600',
          timestamp: new Date('2024-01-15T10:30:15'),
          active: false,
          visible: true
        }
      ]
      
      progress.value = 100
    } else if (conversation.id === 2) {
      // 数据分析对话
      messages.value = [
        {
          id: 1,
          role: 'user',
          content: '最近一个月深圳市的AQI变化趋势，请帮我分析一下',
          created_at: new Date('2024-01-14T14:20:00')
        },
        {
          id: 2,
          role: 'assistant',
          content: '根据最近一个月深圳市的AQI数据分析，我为您总结以下趋势：\n\n**总体趋势：**\n- AQI整体呈现下降趋势，空气质量逐步改善\n- 优良天数占比达到85%，较上月提升5个百分点\n- 轻度污染天数减少3天，中度污染天数减少1天\n\n**主要污染物：**\n- PM2.5仍然是主要污染物，占比45%\n- PM10占比25%，O3占比20%，其他污染物占比10%\n\n**建议措施：**\n1. 继续加强工业排放管控\n2. 优化交通流量管理\n3. 增加城市绿化覆盖率',
          created_at: new Date('2024-01-14T14:20:30')
        }
      ]
      
      // 加载数据分析处理任务
      processingTasks.value = [
        {
          id: 1,
          title: '1. 需求分析',
          description: '理解用户数据查询需求',
          icon: 'fas fa-search',
          details: {
            title: '需求分析流程',
            items: [
              '✓ 分析查询目标：深圳AQI趋势分析',
              '✓ 确定时间范围：最近一个月的数据',
              '✓ 识别数据类型：空气质量指数时间序列',
              '✓ 明确输出要求：趋势分析和可视化展示'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 2,
          title: '2. 数据查询',
          description: '查询环境监测数据库',
          icon: 'fas fa-database',
          details: {
            title: '数据查询流程',
            items: [
              '✓ 连接数据库：建立与深圳环境监测数据库的连接',
              '✓ 构建查询语句：编写SQL查询最近30天的AQI数据',
              '✓ 执行数据检索：获取各监测点的AQI时间序列数据',
              '✓ 数据验证：检查数据完整性和准确性'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 3,
          title: '3. 数据分析',
          description: '进行趋势和统计分析',
          icon: 'fas fa-chart-line',
          details: {
            title: '数据分析流程',
            items: [
              '✓ 数据清洗：处理缺失值和异常值',
              '✓ 趋势分析：计算AQI的变化趋势和斜率',
              '✓ 统计分析：计算平均值、最大值、最小值等统计指标',
              '✓ 相关性分析：分析AQI与其他环境因素的相关性'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 4,
          title: '4. 结果生成',
          description: '生成分析报告和可视化',
          icon: 'fas fa-file-alt',
          details: {
            title: '结果生成流程',
            items: [
              '✓ 生成统计图表：创建AQI趋势图和分布图',
              '✓ 撰写分析报告：提供详细的数据分析结果',
              '✓ 提出建议：基于数据分析给出环保建议',
              '✓ 格式化输出：生成用户友好的报告格式'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        }
      ]
      
      // 加载数据分析结果面板
      resultPanels.value = [
        {
          id: 1,
          title: '需求分析',
          content: `
            <div class="space-y-3">
              <div class="flex items-center space-x-2">
                <i class="fas fa-check-circle text-green-500"></i>
                <span>✓ 查询目标：深圳AQI趋势分析</span>
              </div>
              <div class="flex items-center space-x-2">
                <i class="fas fa-check-circle text-green-500"></i>
                <span>✓ 时间范围：最近一个月</span>
              </div>
              <div class="flex items-center space-x-2">
                <i class="fas fa-check-circle text-green-500"></i>
                <span>✓ 数据类型：空气质量指数时间序列</span>
              </div>
            </div>
          `,
          icon: 'fas fa-search',
          iconBg: 'bg-blue-500',
          step: '步骤 1',
          stepBadge: 'bg-blue-100 text-blue-600',
          timestamp: new Date('2024-01-14T14:20:05'),
          active: false,
          visible: true
        },
        {
          id: 2,
          title: '数据查询',
          content: `
            <div class="space-y-3">
              <div class="border-l-4 border-blue-400 pl-4">
                <h4 class="font-medium text-slate-800">SQL查询语句</h4>
                <div class="bg-slate-100 p-3 rounded mt-2">
                  <code class="text-sm text-slate-700">
                    SELECT date, aqi_value, station_name<br>
                    FROM air_quality_data<br>
                    WHERE station_name LIKE '%深圳%'<br>
                    AND date >= DATE_SUB(CURRENT_DATE(), INTERVAL 30 DAY)<br>
                    ORDER BY date ASC;
                  </code>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-database',
          iconBg: 'bg-indigo-500',
          step: '步骤 2',
          stepBadge: 'bg-indigo-100 text-indigo-600',
          timestamp: new Date('2024-01-14T14:20:10'),
          active: false,
          visible: true
        },
        {
          id: 3,
          title: '数据分析',
          content: `
            <div class="space-y-3">
              <div class="bg-blue-50 p-3 rounded-lg">
                <h4 class="font-medium text-blue-800 mb-2">统计分析结果</h4>
                <div class="text-sm text-blue-700 space-y-1">
                  <div>• 平均AQI：58.2</div>
                  <div>• 最高AQI：95</div>
                  <div>• 最低AQI：32</div>
                  <div>• 优良天数比例：100%</div>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-chart-line',
          iconBg: 'bg-purple-500',
          step: '步骤 3',
          stepBadge: 'bg-purple-100 text-purple-600',
          timestamp: new Date('2024-01-14T14:20:20'),
          active: false,
          visible: true
        },
        {
          id: 4,
          title: '结果生成',
          content: `
            <div class="space-y-3">
              <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-5 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-3">AQI趋势分析报告</h4>
                <p class="text-sm text-slate-700 leading-relaxed">
                  最近一个月深圳AQI整体呈现良好趋势，平均值为58.2，全部达到优良标准。建议继续保持现有环保措施，关注特殊气象条件下的空气质量变化。
                </p>
              </div>
            </div>
          `,
          icon: 'fas fa-file-alt',
          iconBg: 'bg-green-500',
          step: '步骤 4',
          stepBadge: 'bg-green-100 text-green-600',
          timestamp: new Date('2024-01-14T14:20:30'),
          active: false,
          visible: true
        }
      ]
      
      progress.value = 100
    } else if (conversation.id === 3) {
      // 图像识别对话
      messages.value = [
        {
          id: 1,
          role: 'user',
          content: '帮我从空气质量管控的角度，对这张图片做解读',
          created_at: new Date('2024-01-13T09:15:00')
        },
        {
          id: 2,
          role: 'assistant',
          content: '从空气质量管控的角度分析这张图片：\n\n**图像识别结果：**\n- 识别到城市天际线，可见度良好\n- 天空呈现淡蓝色，无明显污染层\n- 建筑物轮廓清晰，无雾霾现象\n\n**空气质量评估：**\n- 当前AQI水平估计在50-80之间\n- 空气质量等级：良\n- 主要污染物浓度较低\n\n**管控建议：**\n1. 继续维持现有管控措施\n2. 加强重点区域监测\n3. 做好预警预案准备',
          created_at: new Date('2024-01-13T09:15:45')
        }
      ]
      
      // 加载图像识别处理任务
      processingTasks.value = [
        {
          id: 1,
          title: '1. 图像识别',
          description: '识别图像内容和类型',
          icon: 'fas fa-eye',
          details: {
            title: '图像识别流程',
            items: [
              '✓ 图像预处理：调整图像大小和质量',
              '✓ 对象检测：识别图像中的图表和文字',
              '✓ 类型识别：确定为臭氧变化趋势图',
              '✓ 内容解析：提取图像中的关键信息'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 2,
          title: '2. 数据提取',
          description: '提取图表中的数据',
          icon: 'fas fa-chart-bar',
          details: {
            title: '数据提取流程',
            items: [
              '✓ 坐标识别：识别X轴和Y轴的坐标系统',
              '✓ 数据点提取：从趋势线中提取关键数据点',
              '✓ 数值转换：将像素坐标转换为实际数值',
              '✓ 数据验证：验证提取数据的准确性'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 3,
          title: '3. 趋势分析',
          description: '分析数据变化趋势',
          icon: 'fas fa-chart-line',
          details: {
            title: '趋势分析流程',
            items: [
              '✓ 数据整理：按时间顺序整理提取的数据',
              '✓ 趋势计算：计算臭氧浓度的变化趋势',
              '✓ 周期性分析：分析数据的周期性变化',
              '✓ 异常检测：识别数据中的异常点'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 4,
          title: '4. 报告生成',
          description: '生成分析报告',
          icon: 'fas fa-file-alt',
          details: {
            title: '报告生成流程',
            items: [
              '✓ 结果总结：总结臭氧变化的主要特征',
              '✓ 趋势描述：详细描述变化趋势和模式',
              '✓ 原因分析：分析可能的成因和影响因素',
              '✓ 建议提出：基于分析结果提出相关建议'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        }
      ]
      
      // 加载图像识别结果面板
      resultPanels.value = [
        {
          id: 1,
          title: '图像识别',
          content: `
            <div class="bg-green-50 p-3 rounded-lg">
              <h4 class="font-medium text-green-800 mb-2">图像识别结果</h4>
              <div class="text-sm text-green-700 space-y-1">
                <div>✓ 图像类型：臭氧浓度时间序列图</div>
                <div>✓ 时间范围：2024年1月</div>
                <div>✓ 数据格式：折线图</div>
                <div>✓ 关键特征：显示明显的周期性变化</div>
              </div>
            </div>
          `,
          icon: 'fas fa-eye',
          iconBg: 'bg-blue-500',
          step: '步骤 1',
          stepBadge: 'bg-blue-100 text-blue-600',
          timestamp: new Date('2024-01-13T09:15:10'),
          active: false,
          visible: true
        },
        {
          id: 2,
          title: '数据提取',
          content: `
            <div class="space-y-3">
              <div class="bg-blue-50 p-3 rounded-lg">
                <h4 class="font-medium text-blue-800 mb-2">数据提取结果</h4>
                <div class="text-sm text-blue-700 space-y-1">
                  <div>• 提取数据点：30个</div>
                  <div>• 臭氧浓度范围：45-120 μg/m³</div>
                  <div>• 平均浓度：78.5 μg/m³</div>
                  <div>• 超标天数：2天</div>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-chart-bar',
          iconBg: 'bg-indigo-500',
          step: '步骤 2',
          stepBadge: 'bg-indigo-100 text-indigo-600',
          timestamp: new Date('2024-01-13T09:15:20'),
          active: false,
          visible: true
        },
        {
          id: 3,
          title: '趋势分析',
          content: `
            <div class="space-y-3">
              <div class="bg-yellow-50 p-3 rounded-lg">
                <h4 class="font-medium text-yellow-800 mb-2">趋势分析结果</h4>
                <div class="text-sm text-yellow-700 space-y-1">
                  <div>• 总体趋势：先上升后下降</div>
                  <div>• 峰值出现：1月15日左右</div>
                  <div>• 周期性：呈现7天周期变化</div>
                  <div>• 异常点：1月14日数据异常</div>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-chart-line',
          iconBg: 'bg-purple-500',
          step: '步骤 3',
          stepBadge: 'bg-purple-100 text-purple-600',
          timestamp: new Date('2024-01-13T09:15:35'),
          active: false,
          visible: true
        },
        {
          id: 4,
          title: '报告生成',
          content: `
            <div class="space-y-3">
              <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-5 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-3">图像分析报告</h4>
                <p class="text-sm text-slate-700 leading-relaxed">
                  图像显示2024年1月臭氧浓度呈现先升后降的趋势，月中旬达到峰值。建议在臭氧浓度较高时段加强监测，必要时采取管控措施。
                </p>
              </div>
            </div>
          `,
          icon: 'fas fa-file-alt',
          iconBg: 'bg-green-500',
          step: '步骤 4',
          stepBadge: 'bg-green-100 text-green-600',
          timestamp: new Date('2024-01-13T09:15:45'),
          active: false,
          visible: true
        }
      ]
      
      progress.value = 100
    } else if (conversation.id === 4) {
      // 代码优化对话
      messages.value = [
        {
          id: 1,
          role: 'user',
          content: '请帮我审查这段Python代码，找出潜在的性能问题',
          created_at: new Date('2024-01-12T16:45:00')
        },
        {
          id: 2,
          role: 'assistant',
          content: '经过代码审查，发现以下性能问题和优化建议：\n\n**发现的问题：**\n1. **重复计算问题** - 在循环中重复计算相同的值\n2. **内存使用不当** - 大量临时对象创建\n3. **算法复杂度** - O(n²)复杂度可以优化\n\n**优化建议：**\n1. 使用缓存机制避免重复计算\n2. 采用生成器减少内存占用\n3. 优化算法结构，降低时间复杂度\n\n**预期改进：**\n- 执行时间减少60-70%\n- 内存使用降低40-50%\n- 代码可读性提升',
          created_at: new Date('2024-01-12T16:46:00')
        }
      ]
      
      // 加载代码优化处理任务
      processingTasks.value = [
        {
          id: 1,
          title: '1. 代码分析',
          description: '分析代码结构和逻辑',
          icon: 'fas fa-code',
          details: {
            title: '代码分析流程',
            items: [
              '✓ 语法检查：检查代码语法错误',
              '✓ 结构分析：分析代码的整体结构和模块',
              '✓ 算法识别：识别使用的算法和数据结构',
              '✓ 复杂度分析：分析时间和空间复杂度'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 2,
          title: '2. 性能检测',
          description: '检测性能问题和瓶颈',
          icon: 'fas fa-tachometer-alt',
          details: {
            title: '性能检测流程',
            items: [
              '✓ 瓶颈识别：识别性能瓶颈所在',
              '✓ 内存分析：分析内存使用情况和泄漏风险',
              '✓ 执行效率：评估代码执行效率',
              '✓ 资源消耗：分析CPU和其他资源的消耗'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 3,
          title: '3. 优化建议',
          description: '提供优化建议',
          icon: 'fas fa-lightbulb',
          details: {
            title: '优化建议流程',
            items: [
              '✓ 算法优化：推荐更高效的算法',
              '✓ 代码重构：建议代码重构方案',
              '✓ 并行化：建议并行化处理方案',
              '✓ 缓存策略：推荐合适的缓存策略'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        },
        {
          id: 4,
          title: '4. 最佳实践',
          description: '提供编码最佳实践',
          icon: 'fas fa-star',
          details: {
            title: '最佳实践流程',
            items: [
              '✓ 代码规范：建议遵循的编码规范',
              '✓ 设计模式：推荐适用的设计模式',
              '✓ 错误处理：建议完善的错误处理机制',
              '✓ 测试策略：推荐单元测试和集成测试策略'
            ]
          },
          showDetails: false,
          status: 'completed' as const
        }
      ]
      
      // 加载代码优化结果面板
      resultPanels.value = [
        {
          id: 1,
          title: '代码分析',
          content: `
            <div class="bg-green-50 p-3 rounded-lg">
              <h4 class="font-medium text-green-800 mb-2">代码分析结果</h4>
              <div class="text-sm text-green-700 space-y-1">
                <div>✓ 代码类型：Python数据处理脚本</div>
                <div>✓ 主要功能：数据清洗和分析</div>
                <div>✓ 代码结构：函数式编程</div>
                <div>✓ 算法复杂度：O(n log n)</div>
              </div>
            </div>
          `,
          icon: 'fas fa-code',
          iconBg: 'bg-blue-500',
          step: '步骤 1',
          stepBadge: 'bg-blue-100 text-blue-600',
          timestamp: new Date('2024-01-12T16:45:10'),
          active: false,
          visible: true
        },
        {
          id: 2,
          title: '性能检测',
          content: `
            <div class="space-y-3">
              <div class="bg-red-50 p-3 rounded-lg">
                <h4 class="font-medium text-red-800 mb-2">性能问题识别</h4>
                <div class="text-sm text-red-700 space-y-1">
                  <div>• 内存泄漏：未正确关闭文件连接</div>
                  <div>• 重复计算：循环中重复计算相同值</div>
                  <div>• 低效算法：使用嵌套循环查找</div>
                  <div>• 缺少缓存：重复读取外部数据</div>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-tachometer-alt',
          iconBg: 'bg-indigo-500',
          step: '步骤 2',
          stepBadge: 'bg-indigo-100 text-indigo-600',
          timestamp: new Date('2024-01-12T16:45:25'),
          active: false,
          visible: true
        },
        {
          id: 3,
          title: '优化建议',
          content: `
            <div class="space-y-3">
              <div class="bg-yellow-50 p-3 rounded-lg">
                <h4 class="font-medium text-yellow-800 mb-2">优化建议</h4>
                <div class="text-sm text-yellow-700 space-y-1">
                  <div>• 使用上下文管理器：with语句管理资源</div>
                  <div>• 算法优化：使用字典查找替代循环</div>
                  <div>• 内存优化：使用生成器替代列表</div>
                  <div>• 添加缓存：使用functools.lru_cache</div>
                </div>
              </div>
            </div>
          `,
          icon: 'fas fa-lightbulb',
          iconBg: 'bg-purple-500',
          step: '步骤 3',
          stepBadge: 'bg-purple-100 text-purple-600',
          timestamp: new Date('2024-01-12T16:45:40'),
          active: false,
          visible: true
        },
        {
          id: 4,
          title: '最佳实践',
          content: `
            <div class="space-y-3">
              <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-5 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-3">最佳实践建议</h4>
                <p class="text-sm text-slate-700 leading-relaxed">
                  建议遵循PEP 8编码规范，添加类型注解，编写单元测试，使用虚拟环境管理依赖。推荐使用pandas进行数据处理，matplotlib进行可视化。
                </p>
              </div>
            </div>
          `,
          icon: 'fas fa-star',
          iconBg: 'bg-green-500',
          step: '步骤 4',
          stepBadge: 'bg-green-100 text-green-600',
          timestamp: new Date('2024-01-12T16:46:00'),
          active: false,
          visible: true
        }
      ]
      
      progress.value = 100
    }
    
    console.log('选中对话:', conversation.title, '加载消息数:', messages.value.length)
  }

  // 选择对话
  const selectConversation = (conversation: Conversation) => {
    loadConversation(conversation)
  }

  return {
    // 基础状态
    sidebarOpen,
    selectedRobot,
    searchQuery,
    selectedConversation,
    newMessage,
    isLoading,
    
    // 数据状态
    messages,
    conversations,
    progress,
    processingTasks,
    resultPanels,
    
    // 计算属性
    filteredConversations,
    
    // 方法
    resetState,
    createNewConversation,
    selectConversation,
    loadConversation
  }
}